<%@page import="com.mconnect.msurvey.controller.ResponderManager"%>
<%@page import="com.mconnect.msurvey.model.ResponderRecommended"%>
<%@page import="com.mconnect.msurvey.controller.RecommendedManager"%>
<%@page import="com.mconnect.msurvey.controller.CategoryManager"%>
<%@page import="com.mconnect.msurvey.model.Questions"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="com.mconnect.msurvey.controller.QuestionsManager"%>
<%@page import="com.mconnect.msurvey.model.Responder"%>
<%@page import="com.mconnect.msurvey.model.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib prefix="s" uri="/struts-tags"%>
     
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	  <title>Panel Admina</title>
	  <link rel="stylesheet" href="js/jQuery/demos.css">
	   <link rel="stylesheet" href="resources/css/ap.css">
	  <link rel="stylesheet" href="js/jQuery/themes/base/jquery.ui.all.css">
		<link rel="stylesheet" href="resources/css/detail_style.css">
		
	<script src="js/jQuery/jquery-1.8.2.js"></script>
	<script src="js/jQuery/external/jquery.bgiframe-2.1.2.js"></script>
	<script src="js/jQuery/ui/jquery.ui.core.js"></script>
	<script src="js/jQuery/ui/jquery.ui.widget.js"></script>
	<script src="js/jQuery/ui/jquery.ui.mouse.js"></script>
	<script src="js/jQuery/ui/jquery.ui.button.js"></script>
	<script src="js/jQuery/ui/jquery.ui.draggable.js"></script>
	<script src="js/jQuery/ui/jquery.ui.position.js"></script>
	<script src="js/jQuery/ui/jquery.ui.resizable.js"></script>
	<script src="js/jQuery/ui/jquery.ui.dialog.js"></script>
	<script src="js/jQuery/ui/jquery.ui.effect.js"></script>
	<script src="js/jQuery/ui/jquery.ui.datepicker.js" charset="utf-8"></script>
	<style>
		body { font-size: 62.5%; color:white;}
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 775px; margin-left: auto; margin-right: auto;  text-align: left; font-family: Arial;font-size: 12px;}
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
		
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		th#jaca { border: 1px solid #eee; padding: .6em 10px; text-align: left; text-align: center;}
		td#jaca { border: 1px solid #eee; padding: .2em 2px; text-align: left; text-align: center;}
		th{color: black;}
	
	</style>
	
	<script type="text/javascript" charset="utf-8">
		$(function() {
			var time = $( "#time" ),
			data = $( "#datepicker" );
			allFields = $( [] ).add( data ).add( time ),
			tips = $( ".validateTips" ),
			message = $( ".messageTips" );
			
			function updateTips( t ) {
				tips
					.text( t )
					.addClass( "ui-state-highlight" );
				setTimeout(function() {
					tips.removeClass( "ui-state-highlight", 1500 );
				}, 500 );
			}
			
			
			function checkLength( o, n, min, max ) {
				if ( o.val().length > max || o.val().length < min ) {
					o.addClass( "ui-state-error" );
					updateTips( "Pole " + n + " nie może być puste.");
					return false;
				} else {
					return true;
				}
			}
	
			$( "#dialog-form" ).dialog({
				autoOpen: false,
				height: 300,
				width: 350,
				modal: true,
				buttons: {
					"Zapisz": function() {
						var bValid = true;
						allFields.removeClass( "ui-state-error" );
						
						bValid = bValid && checkLength( data, "Daty", 1, 16 );
						bValid = bValid && checkLength( time, "Godziny", 1, 20 );
						
						var times = document.getElementById("time").value;
						var datas = document.getElementById("datepicker").value;
						var id_responders = document.getElementById("id_responder").value;
						
						if ( bValid ) {
						$.get(
								'confirmResponder.action',
								{
									time: times,
									date: datas,
									id_responder: id_responders
								},
								function (content) {
									$('#msg').html(content);
									location.reload();
									return false;
								}
							);
							$( this ).dialog( "close" );
							document.getElementById("create-confirm").disabled = true;
							
						}
						
					},
					"Anuluj": function() {
						$( this ).dialog( "close" );
					}
				},
				close: function() {
					allFields.removeClass( "ui-state-error" );
				}
			});
	
			$( "#create-confirm" )
				.button()
				.click(function() {
					$( "#dialog-form" ).dialog( "open" );
				});
			
			$( "#datepicker" ).datepicker();
			
			$('#updateResponder').click(function(){
				
				var id_responders = document.getElementById("id_responder").value;
				$.get(
						'updateResponder.action',
						{
							id_responder: id_responders
							
						},
						function (content) {
							$('#msg').html(content);
							location.reload();
							return false;
						}
					);
				
			});
			
			
			
		});
		
		
		
	</script>
  </head>

<body>
<%
	int id_survey = Integer.parseInt(request.getParameter("id"));
	int id_responder = Integer.parseInt(request.getParameter("id_responder"));
	String date = request.getParameter("date");
	ResponderManager rsM = new ResponderManager();
	List<Responder> responder = new ArrayList<Responder>();
	responder = rsM.getRespodnerById(id_responder);
	
	QuestionsManager qM = new QuestionsManager();
	List<Questions> questionsList = new ArrayList<Questions>();
	questionsList = qM.getQuestionsAfterIdFromDB(id_survey);
	
	CategoryManager cM = new CategoryManager();
	List<String> categoryList = new ArrayList<String>();
	categoryList = cM.getCategoryByIdSurvey(id_survey);
	
	RecommendedManager rM = new RecommendedManager();
	List<ResponderRecommended> recommendedList = new ArrayList<ResponderRecommended>();
	recommendedList = rM.getRecommendedListAfterId(id_responder);
%>
<div id="top">
   
     <div class="sessionUser">
    	<div id="logoMconnect">
    		<img src="resources/images/top_logo.gif" width="84" height="59" alt="image001"/>
    	</div>
    	<div id="mConnect_txt" style="color:black;">
        	mConnect<br/>al. Jana Pawła II 41c<br/>31-864 Kraków
       </div>
    	
	     <% User admin = (User)session.getAttribute("admin"); 
			if(admin == null){ %>
				<jsp:forward page="loginAdminForm.jsp"></jsp:forward>
		<%}%>
    </div>
    <img src="resources/images/kreska.png" class="kreska">
    <div class="header_txt">
      <a href="adminPanel.jsp" style="text-decoration: none;">
     		<p class="header_txt_1">mSurvey</p>
      		<p class="header_txt_2">Panel Administratora</p>
      	</a>
    </div>
    <ul id=menu>
	    <li><s:a action="goToSearchSurvey"> Wyszukaj ankietę </s:a></li>
		<li><s:a action="goToCampaigns">Kampanie</s:a></li>
		<li><s:a action="goToRegisterUser">Dodaj ankietera</s:a></li>
		<li><s:a action="goToConfirmList">Potwierdziły przybycie</s:a></li>
		<li><s:a action="goToReports">Raporty</s:a></li>
		<li style="float: right"><s:a action="logoutAdmin">Wyloguj</s:a></li>
    </ul>
    <div id=kategorie >
   
    	<div style="float: right; margin-right: 10px;">
    		<table style="color: black; font-weight: bold; font-size: 13px; text-align: center;">
    			<tr>
    				<td>Data przeprowadzenia ankiety:</td>
    				<td width="100px;"><%= date %></td>
    			</tr>
    		</table>
    	</div>
    	<center>
    	<div id="users-contain" class="ui-widget">	
			<div id="d_all">
		      <div id="d_top1">
		     
		             <div class="d_a" style="width: 130px;">
		              <div class="a" >Imie i nazwisko</div>
		             </div>
		             <div class="d_b" style="width: 150px;">
		                <div class="b"><%= responder.iterator().next().getFirstname() + " " + responder.iterator().next().getLastname() %></div>
		             </div>
		             <div class="d_a" style="width: 65px;">
		                <div class="a">Telefon</div>
		             </div>
		             <div class="d_b">
		                <div class="b"><%= responder.iterator().next().getPhone() %></div>
		             </div>
		             <div class="d_a" style="width: 65px;">
		                <div class="a">e-mail</div>
		             </div>
		             <div class="d_b">
		                <div class="b"><a style="color: white" href="mailto:<%= responder.iterator().next().getMail() %>"><%= responder.iterator().next().getMail() %></a></div>
		             </div>
		        
		      </div>
		      
		      <div id="d_bottom" style="min-height: 450px;">
		        <div id="d_bottom_txt" style="margin-top: 20px;">
		        	<table style="color: black; width: 600px;">
		        		<tr>
		        			<td id="left">Nazwa uczelni</td>
		        			<td id="right"><%= questionsList.iterator().next().getQuestion6() %></td>
		        		</tr>
		        		<tr>
		        			<td id="left">Typ studiów</td>
		        			<td id="right"><%= questionsList.iterator().next().getQuestion2() %></td>
		        		</tr>
		        		<tr>
		        			<td id="left">Wiek</td>
		        			<td id="right"><%= questionsList.iterator().next().getQuestion1() %> lat</td>
		        		</tr>
		        		<tr>
		        			<td id="left">Obecnie pracuje</td>
		        			<td id="right"><%= questionsList.iterator().next().getQuestion3() %></td>
		        		</tr>
		        		<tr>
		        			<td id="left">Myśli o zmianie branży</td>
		        			<td id="right"><%= questionsList.iterator().next().getQuestion4() %></td>
		        		</tr>
		        		<tr>
		        			<td id="left">Gotowość do podjęcia pracy</td>
		        			<td id="right"><%= questionsList.iterator().next().getQuestion5() %></td>
		        		</tr>
		        		<tr>
		        			<td style="height: 10px;" ></td>
		        			<td ></td>
		        		</tr>
		        		<tr>
		        			<td id="left" >Branża w której chciałby pracować</td>
		        			<td id="right" ><%= categoryList.get(0) %></td>
		        			
		        		</tr>
		        		<% if(categoryList.size() > 1){ 
		        			for(int i=1; i<=categoryList.size()-1; i++){%>
		        		<tr>
		        			<td id="left" ></td>
		        			<td id="right" ><%= categoryList.get(i) %></td>
		        			
		        		</tr>
		        		<%}} %>
		        		
		        	</table>
		        	
		        	<div style="float: left; width: 100%; margin-top: 20px;">
		        	Polecone osoby:
		        	<%if(recommendedList.isEmpty()){ %>
		        		<br>
		        		<div class="ui-widget">
							<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em; width: 100%;  background-color: #00FF00;">
								<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
								<strong>Ankietowany nikogo nie polecił.</strong></p>
							</div>
						</div>
					<%}else{ %>
		        		<div id="users-contain" class="ui-widget">
							<table id="users" class="ui-widget ui-widget-content" style="width: 580px; margin-left: 20px; margin-top: 10px; text-align: center; ">
							<thead>
							<tr class="ui-widget-header ">
								<th id="jaca">Imie</th>
								<th id="jaca">Nazwisko</th>
								<th id="jaca">Telefon</th>
								<th id="jaca">E-mail</th>
							</tr>
							<tbody>
								<% for(ResponderRecommended recommend : recommendedList){ %>
									<tr>
										<td id="jaca" ><%= recommend.getFirstName() %></td>
										<td id="jaca"><%= recommend.getLastName() %></td>
										<td id="jaca"><%= recommend.getPhone()%></td>
										<td id="jaca"><a style="color: black" href="mailto:<%= recommend.getMail() %>"><%= recommend.getMail() %></a></td>
									</tr>
							<%} %>
							</tbody>	
							</table>
						</div>
						<%} %>
		        	</div>
		        </div>
		      </div>
		    	<center>
		    		<div style="width:100%; float: left;">
		    		<% if("Nie sprawdzono".equals(responder.iterator().next().getConfirm())){ %>
				    	<div class="d_aBack" style="margin-left: 9%; margin-bottom: 10px; background-color: green; width: 180px;"  >
				        	<button  id="create-confirm" style="color: black; font-weight: bold;" >Potwierdź przybycie</button>
				        </div>
				         <div class="d_aBack" style="margin-left: 5%; margin-bottom: 10px; width: 180px;"  >
				        	<div class="a"><a href="javascript:history.back()" style="text-decoration: none; display: block; text-align: center; color: white; font-weight: bold;">Powrót</a></div>
				        </div>
				        <div class="d_aBack" style="margin-left: 5%; margin-bottom: 10px; background-color: red; width: 180px;"  >
				        	<div class="a"><a  href="#" style="text-decoration: none; display: block; text-align: center; color: white; font-weight: bold;" id="updateResponder">Nie potwierdził</a></div>
				        </div>
				       <%}else if("TAK".equals(responder.iterator().next().getConfirm())){ %>
				       	<div class="d_aBack" style="margin-left: 9%; margin-bottom: 10px; background-color: green; width: 250px;"  >
				        	<div class="a" style="font-style: italic; color: white;">Potwierdził przybycie na rozmowę</div>
				        </div>
				        <div class="d_aBack" style="margin-left: 5%; margin-bottom: 10px; width: 180px;"  >
				        	<div class="a"><a href="javascript:history.back()" style="text-decoration: none; display: block; text-align: center; color: white; font-weight: bold;">Powrót</a></div>
				        </div>
				       <%}else if("Nie potwierdził".equals(responder.iterator().next().getConfirm())) {%>
				        <div class="d_aBack" style="margin-left: 5%; margin-bottom: 10px; width: 180px;"  >
				        	<div class="a"><a href="javascript:history.back()" style="text-decoration: none; display: block; text-align: center; color: white; font-weight: bold;">Powrót</a></div>
				        </div>
				        <div class="d_aBack" style="margin-left: 5%; margin-bottom: 10px; background-color: red; width: 350px;"  >
				        	<div class="a" style="font-style: italic; color: white;">Nie wyraźił zgody na przybycie na rozmowę</div>
				        </div>
				        <%} %>
			        </div>
			        
			        <div id="dialog-form" title="Podaj datę i godzinę spotkania">
			        <p class="validateTips">Wszystkie pola są obowiązkowe.</p>
						<form id="form">
						<fieldset>
							<input type="hidden" id="id_responder" value="<%=id_responder %>">
							<label for="datepicker">Data</label>
							<input type="text"  id="datepicker" name="date" class="text ui-widget-content ui-corner-all" style="color: black;" />
							<label for="time">Godzina</label>
							<input type="text" name="time" id="time" value="" class="text ui-widget-content ui-corner-all" />
						</fieldset>
						</form>
					</div>
					
				</center>
		  </div>
	
	</div>	
	</center>
    </div>
</div>
</body>
</html>